<template>
  <div class='conter'>
    <div class='conter-img' v-for="(item, index) in imgsData" :key="index">
      <image :src="item.image" class="full-width-image"
             @click="imgPreview(index)"/>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      imgsData: [
        {image: "/static/imager/index/charge.jpg"},
        {image: "https://picx.zhimg.com/v2-d6f44389971daab7e688e5b37046e4e4_720w.jpg?source=172ae18b"}
      ]
    }
  },
  methods: {
    pictureView(index, imags) {
      let imgs = imags.map(item => {
        //只返回图片路径
        return item
      })
      //调用预览图片的方法
      uni.previewImage({
        urls: imgs,
        current: index
      })
    },
    imgPreview(index) {
      let images = this.imgsData.map(item => item.image).filter(url => url);
      uni.previewImage({
        current: index,
        urls: images,
        indicator: 'default',
        loop: true,
      })
    }

  }
}
</script>

<style lang="scss">
.conter-img {
  width: 100%;
  display: block;
  //margin-bottom: 64rpx;
}

.full-width-image {
  width: 100%;
  display: block;
}
</style>
